<template>
    <div class="cartPage">
        <!-- 顶部标识  start -->
        <div>
            <div>
                <span class="iconfont icon-left" @click="$router.go(-1)"></span>
            </div>
            <div>购物车( {{itemCount}} )</div>
            <div>
                <span @click="del=!del">编辑</span>
                <span class="iconfont icon-message"></span>
            </div>
        </div>
        <!-- 顶部标识  end -->
        <!-- 购物车物品  start -->
        <ScrollView class="cartItem" :class="{'select':del}">
            <div> 
                <div v-for="(item, index) in cartItem" :key="index">
                    <div>
                        <img
                            @click="changeStatus(item.tradeItemId)"
                            v-show="item.status"
                            src=""
                            alt
                        />
                        <img
                            @click="changeStatus(item.tradeItemId)"
                            v-show="!item.status"
                            src=""
                            alt
                        />
                    </div>
                    <div>
                        <img :src="item.img" alt />
                    </div>
                    <div>
                        <div>{{item.title}}</div>
                        <p>商铺:千千衣莎</p>
                        <div>
                            <span>￥{{item.price}}</span>
                            <span>￥{{item.orgPrice}}</span>
                            <span @click="addCartCount(item.tradeItemId)">+</span>
                            <span :style="'border:1px solid gray'">×{{item.count}}</span>
                            <span @click="minusCartCount(item.tradeItemId)">-</span>
                        </div>
                    </div>
                    <div v-show="del">
                        <button @click="removeItem(item.tradeItemId)">删除</button>
                    </div>
                </div>
            </div>
        </ScrollView>
        <!-- 购物车物品  end -->
        <!-- 底部结算  start -->
        <div>
            <div>
                <img
                    @click="changeAllState()"
                    v-show="allState"
                    src=""
                    alt
                />
                <img
                    @click="changeAllState()"
                    v-show="!allState"
                    src=""
                    alt
                />
            </div>
            <div>
                <span>全选( {{count}} )</span>
                <span>￥{{sumPrice}}</span>
            </div>
            <div>
                <input v-show="!del" type="button" value="去结算" />
                <input v-show="del" type="button" value="批量删除" @click="removeItem(1)" />
            </div>
        </div>
        <!-- 底部结算  end -->
    </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
export default {
    name: "cart",
    data() {
        return {
            del: false
        };
    },
    computed: {
        ...mapState(["cartItem", "allState"]),
        itemCount() {
            let arr = Object.keys(this.cartItem);
            return arr.length;
        },
        //选中总数
        count() {
            let arrs = Object.values(this.cartItem);
            let i = 0;
            arrs.forEach(value => {
                if (value.status) {
                    i += 1;
                }
            });
            return i;
        },
        //选中总价格
        sumPrice() {
            let arrs = Object.values(this.cartItem);
            let i = 0;
            arrs.forEach(value => {
                if (value.status) {
                    i += value.price * value.count;
                }
            });
            return i.toFixed(2);
        }
    },
    methods: {
        ...mapMutations([
            "addCartCount",
            "minusCartCount",
            "changeStatus",
            "changeAllState",
            "removeItem"
        ])
    },
    activated() {
        this.changeStatus();
    }
};
</script>

<style lang="less" scoped>
.select {
    background-color: rgb(247, 247, 241);
    box-shadow: 0px -3px 10px gray;
}

.cartPage {
    width: 100vw;
    position: absolute;
    top: 0;
    bottom: 0;
    > div:first-child {
        height: @h;
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
        text-align: center;
        border-bottom: 1px solid @de;
        > div:nth-child(1) {
            flex-grow: 1;
            span {
                font-size: @iconSize;
            }
        }
        > div:nth-child(2) {
            flex-grow: 5;
            font-size: 35px;
            font-weight: bold;
        }
        > div:nth-child(3) {
            flex-grow: 0.8;
            display: flex;
            justify-content: space-around;
            align-items: center;
            span:first-child {
                font-size: 27px;
                font-weight: bold;
            }
            span:last-child {
                color: @99;
                font-size: @iconSize;
            }
        }
    }
    > div:last-child {
        width: 100%;
        height: @h;
        position: absolute;
        left: 0;
        bottom: 0;
        display: flex;
        flex-flow: row nowrap;
        border-top: 1px solid @de;
        > div:nth-child(1) {
            width: 15%;
            height: 100%;
            text-align: center;
            img {
                width: 45px;
                height: 100%;
                object-fit: contain;
            }
        }
        > div:nth-child(2) {
            width: 45%;
            height: 100%;
            display: flex;
            align-items: center;
            span:first-child {
                color: @font;
                font-size: 30px;
            }
            span:last-child {
                color: @pink;
                font-size: 30px;
                margin-left: 20px;
            }
        }
        > div:nth-child(3) {
            width: 40%;
            height: 100%;
            text-align: center;
            input {
                color: @white;
                font-size: 28px;
                font-weight: bold;
                display: inline-block;
                width: 185px;
                height: 60px;
                margin: (@h - 60px)/2 0;
                border: none;
                border-radius: 10px;
                background-color: @pink;
            }
        }
    }
}

.cartItem {
    width: 100vw;
    position: absolute;
    top: @h;
    bottom: @h;
    overflow: hidden;
    > div {
        > div {
            height: 230px;
            display: flex;
            flex-flow: row nowrap;
            border-bottom: 1px solid @de;
            > div:nth-child(1) {
                width: 10%;
                display: flex;
                justify-content: center;
                align-items: center;
                img {
                    width: 55%;
                }
            }
            > div:nth-child(2) {
                width: 15%;
                text-align: center;
                box-sizing: border-box;
                padding: 10px 0;
                img {
                    width: 100%;
                    height: 100%;
                }
            }
            > div:nth-child(3) {
                width: 60%;
                flex-grow: 1;
                box-sizing: border-box;
                padding-left: 30px;
                padding-top: 10px;
                div:nth-of-type(1) {
                    height: 50%;
                    color: @font;
                    font-size: 27px;
                    font-weight: bold;
                    overflow: hidden;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 2;
                }
                p {
                    height: 25%;
                    color: @99;
                    font-size: 27px;
                    font-weight: bold;
                    line-height: 2;
                }
                div:nth-of-type(2) {
                    height: 25%;
                    line-height: 1.8;
                    padding-right: 20px;
                    &::after {
                        content: "";
                        display: block;
                        clear: both;
                    }
                    span:nth-child(1) {
                        float: left;
                        font-weight: bold;
                    }
                    span:nth-child(2) {
                        color: @99;
                        float: left;
                        font-size: 26px;
                        line-height: 2.35;
                        text-decoration: line-through;
                        margin-left: 10px;
                    }
                    span:nth-child(3) {
                        float: right;
                        line-height: 1.5;
                        padding-left: 10px;
                    }
                    span:nth-child(4) {
                        color: @66;
                        float: right;
                        font-size: 25px;
                        padding: 0 10px;
                        line-height: 2.1;
                    }
                    span:nth-child(5) {
                        float: right;
                        line-height: 1.5;
                        padding-right: 10px;
                    }
                }
            }
            > div:last-child {
                width: 15%;
                display: flex;
                justify-content: center;
                align-items: center;
                button {
                    border: none;
                    color: white;
                    width: 80%;
                    height: 50px;
                    border-radius: 5px;
                    background-color: @pink;
                }
            }
        }
    }
}
</style>